<template>
  <div>
    <base-list ref="accountPageList"
               :condition="condition"
               :datas.sync="accountPageList"
               :pageSearch="pageSearch">
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               ref="aList"
               label-width="80px">
        <el-row>
          <el-col :span="24"
                  class="search-width4">
            <el-form-item label="管理方式"
                          prop="condition['search_EQ_manageWay']">
              <el-select v-model="condition['search_EQ_manageWay']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="[key, val] in _dictManagement"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24"
                  class="search-width4">
            <el-form-item label="计量方式"
                          prop="condition['search_EQ_measureWay']">
              <el-select v-model="condition['search_EQ_measureWay']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="[key, val] in _dictMeterStyle"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="货主">
              <auto-search-name placeholder="请选择"
                                @selectId="v=>condition['search_EQ_cargoOwnerId']=v"
                                :name="form.cargoOwnerName"></auto-search-name>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="账页号">
              <auto-cargo searchName="search_LIKE_accountpageNo"
                          v-model="form.pageNum"
                          @select="v=>condition['search_LIKE_accountpageNo']=v"
                          type="name"></auto-cargo>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="品名">
              <el-select v-model="condition['search_EQ_cargoName']"
                         placeholder="请选择"
                         clearable
                         filterable
                         @change="handleCargoChange">
                <el-option v-for="item in cargoNameList"
                           :key="item.cargoName"
                           :label="item.cargoName"
                           :value="item.cargoName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="材质">
              <auto-search-dic v-model="condition['search_EQ_material']"
                               @selectName="v=>condition['search_EQ_material']=v"
                               code="CARGO_CZ"></auto-search-dic>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="生产厂家"
                          clearable>
              <auto-search-dic v-model="condition['search_EQ_madeBy']"
                               @selectName="v=>condition['search_EQ_madeBy']=v"
                               code="CARGO_SCZ"></auto-search-dic>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="账页类型">
              <el-select v-model="condition['search_EQ_accountPageType']"
                         placeholder="请选择">
                <el-option v-for="[key, val] in _dictAccountPageType"
                           :key="key"
                           :label="val"
                           :value="key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width4">
            <el-form-item label="所属仓库">
              <el-select v-model="condition['search_EQ_warehouseCode']"
                         placeholder="请选择">
                <el-option v-for="(item,index) in warehouseList"
                           :key="index"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width8">
            <el-form-item label="建账时间">
              <el-date-picker style="width:150px;"
                              v-model="condition['search_GTE_createDateTime']"
                              type="date"
                              placeholder="选择日期"
                              value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker> 至
              <el-date-picker style="width:150px;"
                              v-model="condition['search_LTE_createDateTime']"
                              type="date"
                              placeholder="选择日期"
                              value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width8">
            <el-form-item label="规格">
              <el-col :span="8">
                <el-form-item prop="search_EQ_normOne"
                              class="gg-input">
                  <el-select v-model="form.search_EQ_normOne"
                             style="width: 100px;">
                    <el-option v-for="item in pmLIst"
                               :key="item.cargoInfo.normOne"
                               :label="item.cargoInfo.normOne"
                               :value="item.cargoInfo.normOne">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="search_EQ_normTwo"
                              class="gg-input">
                  <el-select v-model="form.search_EQ_normTwo"
                             style="width: 100px;">
                    <el-option v-for="item in pmLIst"
                               :key="item.cargoInfo.normTwo"
                               :label="item.cargoInfo.normTwo"
                               :value="item.cargoInfo.normTwo">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="search_EQ_normThree"
                              class="gg-input">
                  <el-select v-model="form.search_EQ_normThree"
                             style="width: 100px;">
                    <el-option v-for="item in pmLIst"
                               :key="item.cargoInfo.normThree"
                               :label="item.cargoInfo.normThree"
                               :value="item.cargoInfo.normThree">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="3"
                  style="width: 190px;">
            <el-button type="primary"
                       icon="el-icon-search"
                       @click="loadData"
                       class="ml-80">查 询</el-button>
            <el-button formVisible="true"
                       icon="el-icon-refresh"
                       @click="resuleBtn('aList')">
              重置
            </el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <div class="control-line">
              <!-- <div class="line"></div> -->
              账页列表
            </div>
          </el-col>
        </el-row>
      </el-form>
      <el-row slot="status">
        <el-button type="primary"
                   @click="handleFormOpen('addGoodsAccountPage', 'copy')">复制一行</el-button>
        <el-button type="primary"
                   @click="handleFormOpen('addGoodsAccountPage', 'edit')">编辑账页</el-button>
        <el-button type="primary"
                   @click="delAccountPage">删除账页</el-button>
        <el-button type="primary"
                   @click="stopOrRecovery('1')">禁止上账</el-button>
        <el-button type="primary"
                   @click="stopOrRecovery('2')">恢复上账</el-button>
        <el-button type="primary"
                   @click="handleFormOpen('mergeAccountPageForm')">合并账页</el-button>
        <el-button type="primary"
                   @click="handleFormOpen('viewDepositReceipt')">查看存单</el-button>
      </el-row>
      <el-table slot="list"
                :data="accountPageList"
                border
                :summary-method="getSummaries"
                show-summary
                max-height="500"
                highlight-current-row
                @current-change="handleSelectionChange">
        <el-table-column type="expand"
                         width="60">
          <template slot-scope="props">
            <el-form label-position="left"
                     inline
                     class="demo-table-expand">
              <el-col :span="6"
                      class="table-expand-style">
                <el-form-item label="所属仓库">
                  <span>{{ props.row.warehouseName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6"
                      class="table-expand-style">
                <el-form-item label="管理方式">
                  <span>{{ props.row.manageWay | _filterManagement}}</span>
                </el-form-item>
              </el-col>
              <el-col class="table-expand-style">
                <el-form-item label="计量方式">
                  <span>{{ props.row.measureWay | _filterMeterStyle}}</span>
                </el-form-item>
              </el-col>
              <el-col class="table-expand-style">
                <el-form-item label="创建人">
                  <span>{{ props.row.createBy}}</span>
                </el-form-item>
              </el-col>
              <el-col class="table-expand-style">
                <el-form-item label="创建时间">
                  <span>{{ props.row.createDateTime}}</span>
                </el-form-item>
              </el-col>
              <el-col class="table-expand-style">
                <el-form-item label="备注">
                  <span>{{ props.row.remark}}</span>
                </el-form-item>
              </el-col>
            </el-form>
          </template>
        </el-table-column>
        <!-- <el-table-column
                  width="40">
            <template slot-scope='scope'>
              <el-radio v-model="scopeRadio" :label="scope.$index" @change.native="handleSelectionChange(scope.row)"></el-radio>
            </template>
        </el-table-column> -->
        <el-table-column label="序号"
                         type="index"
                         width="50"></el-table-column>
        <el-table-column prop="accountpageNo"
                         label="账页号"
                         min-width="80"></el-table-column>
        <el-table-column prop="cargoOwnerName"
                         label="货主"
                         min-width="120"></el-table-column>
        <el-table-column prop="accountPageType"
                         label="账页类型"
                         min-width="100">
          <template slot-scope='scope'>
            {{scope.row.accountPageType | _filterAccountPageType }}
          </template>
        </el-table-column>
        <el-table-column prop="ifForbidAccount"
                         label="禁止上账"
                         min-width="60">
          <template slot-scope='scope'>
            {{scope.row.ifForbidAccount | _filterTrueOrFalse }}
          </template>
        </el-table-column>
        <el-table-column prop="cargoName"
                         label="品名"
                         min-width="80"></el-table-column>
        <el-table-column prop="normStr"
                         label="规格"
                         min-width="80">
          <template slot-scope='scope'>
            {{''+scope.row.normOne +'*'+ scope.row.normTwo +'*'+ scope.row.normThree }}
          </template>
        </el-table-column>
        <el-table-column prop="material"
                         label="材质"
                         min-width="80"></el-table-column>
        <el-table-column prop="madeBy"
                         label="生产厂家"
                         min-width="80"></el-table-column>
        <el-table-column prop="balanceWeight"
                         label="结存重量"
                         min-width="80"></el-table-column>
        <el-table-column prop="balanceNum"
                         label="结存件数"
                         min-width="80"></el-table-column>
        <el-table-column prop="balanceCount"
                         label="结存数量"
                         min-width="80"></el-table-column>
        <el-table-column prop="preWeight"
                         label="预上量"
                         min-width="80"></el-table-column>
      </el-table>
    </base-list>
    <div style="text-align:center">
      <el-button plain
                 type="info"
                 plain
                 @click="handleRouterPush({path: '/goods/storehouse',name: '仓库管理'})">返回</el-button>
    </div>
    <component :is="component"
               ref="component"
               @load="loadData"
               @clear="component=''"></component>
  </div>
</template>

<script>
import {
  addAccountPage,
  getAccountPageList,
  deleteAccountPage,
  getPiecesCargo,
  getCargoOwnerAccount,
  getCargoNameList,
  stopOrRecoveryPage
} from '@/api/things/accountPageList'
import addGoodsAccountPage from './addGoodsAccountPage'
import mergeAccountPageForm from './mergeAccountPageForm'
import viewDepositReceipt from './viewDepositReceipt'
import autoSearchName from '@/components/autocomplete/autoSearchName' //货主组件
import autoCargo from '@/components/autocomplete/autoCargo'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'
import { getWarehouseList } from '@/api/adminWarehouse/adminWarehouse' //所属仓库来源于仓库设置

export default {
  name: 'storehousePlanType',
  components: {
    addGoodsAccountPage,
    autoCargo,
    mergeAccountPageForm,
    viewDepositReceipt,
    autoSearchName,
    autoSearchDic
  },
  data() {
    return {
      form: this.clearForm(),
      dialogForm: false,
      component: '',
      condition: {}, // 查询条件
      accountPageList: [], // table数组
      pmLIst: [], //接口获取的货物属性数据
      warehouseList: [],
      pageSearch: getAccountPageList, // 分页查询api接口
      id: '',
      // xinjia
      manageType: '1',
      calculate: '1',
      cargoOwnerAccount: [],
      cargoNameList: [],
      multipleSelection: [],
      copyOrEdit: '',
      scopeRadio: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData()
    })
    //获取货主
    getCargoOwnerAccount(this.$store.state.user.currentUser.org.id).then(
      res => {
        this.cargoOwnerAccount = res.data.aaData
      }
    )
    //获取货名
    getCargoNameList(this.$store.state.user.currentUser.org.id).then(res => {
      this.cargoNameList = res.data.aaData
    })
    //获取仓库
    getWarehouseList().then(res => {
      this.warehouseList = res.data.aaData
    })
  },
  methods: {
    clearForm() {
      return {
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name,
        search_EQ_accountPageType: '', //账页类型
        search_EQ_cargoName: '', //品名
        search_EQ_endTime: '', //建账结束时间
        search_EQ_startTime: '', //建账开始时间
        search_EQ_Time: '', //建账时间
        search_EQ_madeBy: '', //生产厂家
        search_EQ_manageWay: '', //管理方式
        search_EQ_material: '', //材质
        search_EQ_measureWay: '', //计量方式
        search_EQ_normOne: '', //规格
        search_EQ_normThree: '',
        search_EQ_normTwo: '',
        search_EQ_warehouseCode: '', //所属仓库
        search_LIKE_accountpageNo: '', //账页号
        search_EQ_cargoOwnerCode: '', //货主单位
        sortType: '' //排序
      }
    },
    handleFormOpen(ref, _type) {
      this.component = ref
      if (this.multipleSelection.length == 1) {
        this.$nextTick(() => {
          if (_type == 'copy' || _type == 'edit') {
            this.$refs.component.addForm = {
              accountpageNo: this.multipleSelection[0].accountpageNo,
              cargoOwnerName: this.multipleSelection[0].cargoOwnerName,
              cargoOwnerId: this.multipleSelection[0].cargoOwnerId,
              cargoName: this.multipleSelection[0].cargoName,
              cargoId: this.multipleSelection[0].cargoId,
              material: this.multipleSelection[0].material,
              manageWay: this.multipleSelection[0].manageWay,
              measureWay: this.multipleSelection[0].measureWay,
              madeBy: this.multipleSelection[0].madeBy,
              manageWayDesc: this.multipleSelection[0].manageWayDesc,
              cargoTypeName: this.multipleSelection[0].cargoTypeName,
              normOne: this.multipleSelection[0].normOne,
              normTwo: this.multipleSelection[0].normTwo,
              normThree: this.multipleSelection[0].normThree,
              accountPageType: this.multipleSelection[0].accountPageType,
              warehouseName: this.multipleSelection[0].warehouseName,
              warehouseId: this.multipleSelection[0].warehouseId,
              remark: this.multipleSelection[0].remark
            }
            this.$refs.component.piecesdatas = {
              //货物属性接口参数
              search_EQ_cargoCode: '',
              search_EQ_cargoName: this.multipleSelection[0].cargoName,
              search_EQ_madeBy: this.multipleSelection[0].madeBy,
              search_EQ_manageWay: this.multipleSelection[0].manageWay,
              search_EQ_material: this.multipleSelection[0].material,
              search_EQ_measureWay: this.multipleSelection[0].measureWay,
              search_EQ_normOne: this.multipleSelection[0].normOne,
              search_EQ_normThree: this.multipleSelection[0].normThree,
              search_EQ_normTwo: this.multipleSelection[0].normTwo
            }
            if (this.$refs.component.addForm.manageWay == 'UNIFIED') {
              this.$refs.component.addForm.manageWay = '统一管理'
            }
            if (this.$refs.component.addForm.manageWay == 'SPECIFY') {
              this.$refs.component.addForm.manageWay = '指定管理'
            }
            if (this.$refs.component.addForm.measureWay == 'ID') {
              this.$refs.component.addForm.measureWay = '标识'
            }
            if (this.$refs.component.addForm.measureWay == 'RULER') {
              this.$refs.component.addForm.measureWay = '检尺'
            }
            if (this.$refs.component.addForm.measureWay == 'WEIGHT') {
              this.$refs.component.addForm.measureWay = '检斤'
            }
            this.$refs.component.getgetPiecesCargoApi()
          }
          if (_type == 'edit') {
            this.$refs.component.isEdit = true
          }
          this.$refs.component.dialogForm = true
          this.$refs.component.form = this.multipleSelection[0]
          if (_type != 'copy') {
            this.$refs.component.id = this.multipleSelection[0].id
          }
          if (this.$refs.component.handleViceAccount) {
            this.$refs.component.handleViceAccount()
          }
          if (this.$refs.component.getAccountBillList) {
            this.$refs.component.getAccountBillList(this.$refs.component.id)
          }
        })
      } else {
        this.$message.error('请选择一条数据')
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = []
      this.multipleSelection.push(val)
    },
    loadData() {
      this.$refs.accountPageList.loadData()
    },
    handleCargoChange(status) {
      let that = this
      that.getgetPiecesCargoApi()
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (column.property === 'balanceWeight') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 吨'
        } else if (column.property === 'balanceNum') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 件'
        } else if (column.property === 'preWeight') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 吨'
        } else if (column.property === 'balanceCount') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 个'
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    getgetPiecesCargoApi() {
      let that = this
      getPiecesCargo(that.form).then(function(res) {
        that.pmLIst = res.data.aaData
      })
    },
    delAccountPage() {
      if (this.multipleSelection.length == 1) {
        this.$confirm(`是否删除该数据?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteAccountPage(this.multipleSelection[0].id).then(res => {
              this.$message({
                type: 'success',
                message: `删除成功!`
              })
              this.loadData()
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      } else {
        this.$message.error('请选择一条数据')
      }
    },
    stopOrRecovery(t) {
      let that = this
      if (this.multipleSelection.length == 1) {
        if (t == 1) {
          this.$confirm(`是否禁止上账?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              stopOrRecoveryPage(
                parseInt(that.multipleSelection[0].id),
                parseInt(t)
              ).then(res => {
                this.$message({
                  type: 'success',
                  message: `禁止成功!`
                })
                this.loadData()
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            })
        } else {
          this.$confirm(`是否恢复上账?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              stopOrRecoveryPage(
                parseInt(this.multipleSelection[0].id),
                parseInt(t)
              ).then(res => {
                this.$message({
                  type: 'success',
                  message: `恢复成功!`
                })
                this.loadData()
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            })
        }
      } else {
        this.$message.error('请选择一条数据')
      }
    },
    resuleBtn(aList) {
      this.$refs[aList].resetFields()
      this.condition = this.clearForm()
    }
  }
}
</script>

<style>
.control-line {
  height: 30px;
}
.line {
  border-left: solid 5px #00a1ff;
  height: 18px;
  margin-top: 5px;
  display: inline-block;
  vertical-align: sub;
}
.gg-input {
  margin-bottom: 0 !important;
}
.gg-input .el-form-item__content .el-input {
  width: 100px !important;
}
.search-width6 .el-date-editor {
  width: 240px;
}
.search-width8 {
  width: 420px;
}
/* .search-width8 .el-form-item {
  margin-bottom: 18px;
} */
.base-list .search .border-line {
  margin-top: 0px !important;
}
.table-expand-style {
  width: 300px;
}
.table-expand-style label {
  color: #99a9bf;
}
</style>
